<template>
  <form-item-wrapper :widget="widget" :is-design="isDesign" :parent="parent">
    <el-switch
      v-model="state.optionsModel.value"
      :active-value="options.activeValue"
      :inactive-value="options.inactiveValue"
      :loading="options.loading"
      :disabled="options.disabled"
      @change="options.onChange"
    />
  </form-item-wrapper>
</template>
<script setup>
import { computed, reactive } from 'vue'
import formItemWrapper from './form-item-wrapper.vue'
import registerEvents from '../registerEvents'
const emits = defineEmits(['update:options'])
defineOptions({
  name: 'switch-widget',
  mixins: [registerEvents],
})
const props = defineProps({
  widget: {
    type: Object,
    default: () => {},
  },
  isDesign: {
    type: Boolean,
    default: true,
  },
  options: {
    type: Object,
    default: () => {},
  },
  parent: {
    type: Object,
    default: () => {},
  },
})
const state = reactive({
  optionsModel: computed({
    get() {
      return props.options
    },
    set(v) {
      emits('update:options', v)
    },
  }),
})
</script>
